import React, { Component } from 'react';
import MenuItem from 'material-ui/MenuItem';
import DatePicker from 'material-ui/DatePicker';
import SelectField from 'material-ui/SelectField';
import { Card, CardText } from 'material-ui/Card';

import { DateTimeFormat } from '../Utils/Helper';

export default class EditBasicInfo extends Component {
  render() {
  	return (
  	  <Card className='card-line center-block' style={styles.card}>
        <CardText style={{
          paddingLeft: 24,
          paddingRight: 24,
          height: 'auto'
        }}>
          <SelectField
            floatingLabelText="性别"
            value={this.props.sex}
            onChange={this.props.handleChangeSelect.bind(this, 'sex')}
            underlineStyle={{display: 'none'}}
          >
            <MenuItem value={"男"} primaryText="男" />
            <MenuItem value={"女"} primaryText="女" />
          </SelectField><br />

          <SelectField
            floatingLabelText="情感状况"
            value={this.props.state}
            onChange={this.props.handleChangeSelect.bind(this, 'state')}
            underlineStyle={{display: 'none'}}
          >
            <MenuItem value={"单身汪"} primaryText="单身汪" />
            <MenuItem value={"热恋中"} primaryText="热恋中" />
            <MenuItem value={"保密"} primaryText="保密" />
          </SelectField><br />

          <DatePicker 
            locale='zh'
            autoOk={true}
            cancelLabel='取消'
            maxDate={new Date()}
            minDate={new Date('1990-1-1 00:00')}
            fullWidth={true}
            underlineShow={false}
            floatingLabelText='出生于'
            DateTimeFormat={DateTimeFormat}
            defaultDate={this.props.birth ? new Date(this.props.birth) : ''}
            onChange={this.props.handleChangeDate.bind(this, 'birth')}
          />
        </CardText>
      </Card>
  	);
  }
};

const styles = {
  card: {
    maxWidth: 728,
    position: 'relative',
    marginBottom: 0
  },
};